<template>
	<view>
		<view>
			<image src="../../static/fanhui.png" class="back" @click="back"></image>
			<image class="backgroundImg" src="https://img01-xusong.91q.com/C5DFFF8C-EF02-4F2A-826F-9CEC84414DF5.jpeg"></image>
			<image class="headImg" :src="userData.avatarUrl"></image>
			<view class="name">
				<view class="nameText">{{userData.nickName}}</view>
			</view>
		</view>
		<view>
			<view class="tabBorder">
				<u-tabs :list="list1" lineWidth="30" lineColor="#BD3124"
					itemStyle="padding-left:0rpx;padding-right:0rpx;width:284rpx; height:80rpx; " @click="click"
					:activeStyle="{
						color: '#101010 100%',
						fontWeight: 'bold',
						transform: 'scale(1.05)',
						
					}" :inactiveStyle="{
						color: '#9B9B9B 100%',
						transform: 'scale(1)'
					}"></u-tabs>
			</view>
		</view>
		<view class="bottomCard">
			<act-card_heng v-show="isTabs.name==0"
			v-for="(item,index) in EventData"
			:item="item"
			:imgId="item.img_id"
			:eventname="item.event_name">
				</act-card_heng>
			<association-card_heng v-show="isTabs.name==1"
			v-for="(item,index) in AssociationData"
			:item="item"
			:imgId="item.img_id"></association-card_heng>
		</view>
	</view>
</template>

<script>
	import actCard_heng from '../../components/actCard_heng.vue'
	import associationCard_heng from '../../components/associationCard_heng.vue'
	export default {
		components: {
			actCard_heng,
			associationCard_heng
		},
		data(){
			return{
				isTabs: {
					name: '',
				},
				userData:{},
				userId:'',
				EventData:[],
				AssociationData:[],
				list1: [{
						name: '活动',
					},
					{
						name: '社团',
					},
				
				]
			}
		},
		methods:{
			click(item) {
				
				this.isTabs.name = item.index;
			},
			back(){
				uni.navigateBack({
					delta:1,
				})
			},
			getAssociation(){
				let that=this;
				uni.request({
					url:'https://www.codingyt.com/club/userOrganization/select',
					data:{
						userId:that.userId
					},
					success(res) {
						that.AssociationData=res.data.data
						
					}
				})
			},
			getEvent(){
				let that=this;
				uni.request({
					url:'https://www.codingyt.com/club/userEvent/select',
					data:{
						userId:that.userId
					},
					success(res) {
						
						that.EventData=res.data.data
						
					}
				})
			}
		},
		onLoad(val) {
			let data=JSON.parse(val.content)
			this.userData=data
			this.userId=data.id
			this.getAssociation()
			this.getEvent()
			
		},
		//这个用户参加的活动,社团有哪些
		created() {
			
	}
		
	}
</script>

<style>
	.backgroundImg{
		left: 0rpx;
		top: 0rpx;
		width: 750rpx;
		height: 410rpx;
		position: absolute;
	}
	.back{
		left: 36rpx;
		top: 98rpx;
		width: 48rpx; 
		height: 48rpx;
		z-index: 50;
		position: absolute;
	}
	.headImg{
		left: 274rpx;
		top: 310rpx;
		width: 200rpx;
		height: 200rpx; 
		border-radius: 108rpx;
		box-shadow: 0rpx 24rpx 48rpx -18rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}
	.name{
		top: 548rpx;
		width: 750rpx;
		height: 80rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 44rpx;
		  ;
		position: absolute;
	}
	.nameText{
		text-align: center;
	}
	.tabBorder{
		left: 82rpx;
		top: 664rpx;
		width: 588rpx;
		height: 82rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 12rpx 48rpx -16rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}
	.bottomCard{
		position: absolute;
		top: 840rpx;
	}
</style>
